<template>
	<view class="tab-form">
		<view class="tab-form_top">
			<view class="tab-form_top_item" :class="index == current ?'active':''" v-for="(item, index) in menu"
				:key="index" @click="change(index)">
				<view class="tab-form_top_item_tab" v-if="index == current">
					<block v-for="(chil, i) in item.children" :key="i">
						<view class="tab-form_top_item_tab_item" :class="current_child == i ?'tab-this':''"
							@click.stop="onTab(i, chil)">
							<view class="tab-form_top_item_tab_item_name">
								{{chil.name}}
							</view>
							<view class="tab-form_top_item_tab_item_desc" v-if="item.desc">
								{{chil.desc}}
							</view>
						</view>
					</block>
				</view>
				<view class="tab-form_top_item_box" v-else>
					<view class="tab-form_top_item_box_name">
						{{item.name}}
					</view>
					<view class="tab-form_top_item_box_desc">
						{{item.desc}}
					</view>
				</view>
			</view>
		</view>

		<view class="tab-form_body">
			<view class="tab-form_body_mdd">
				<view class="tab-form_body_mdd_text">
					我要去 <rui-icons type="right" color="#ccc"></rui-icons>
				</view>
				<view class="tab-form_body_mdd_input" :class="mdd ?'':'gray'">
					{{mdd || '请选择目的地'}}
				</view>
			</view>
			<scroll-view class="scroll-view" scroll-x="true">
				<view class="tab-form_body_tag">
					<view class="tab-form_body_tag_item" :class="current_mdd == index ?'tag_active':''"
						v-for="(item, index) in mdd_list" :key="index" @click="onMdd(item, index)">
						<rui-icons type="hot" size="26" color="#f60" v-if="item.status"></rui-icons>{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="tab-form_bottom">
			<view class="tab-form_bottom_item" @click="openCalendar">
				<view class="tab-form_bottom_item_text">
					{{date_text || '出发日期'}}
				</view>
				<view class="tab-form_bottom_item_desc" v-if="!date_text">
					可选
				</view>
				<view class="tab-form_bottom_item_icon">
					<rui-icons type="right" color="#ccc"></rui-icons>
				</view>
			</view>
			<view class="tab-form_bottom_item">
				<picker :value="index" :range="day_arr" @change="onPicker">
					<view class="tab-form_bottom_item_text">
						{{day_text || '游玩天数'}}
					</view>
					<view class="tab-form_bottom_item_desc" v-if="!day_text">
						可选
					</view>
				</picker>
				<view class="tab-form_bottom_item_icon">
					<rui-icons type="right" color="#ccc"></rui-icons>
				</view>
			</view>
		</view>
		<button class="tab-form_button" @click="to">查询</button>
		<view class="tab-form_tips">
			省心省钱 · 快乐旅行
		</view>
	</view>

	<uni-calendar ref="calendar" :insert="false" :start-date="startDate" :end-date="endDate" @confirm="confirm" />
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue"
	let mdd = ref("")
	let current_child = ref(0)
	let current_mdd = ref()
	let current = ref(0)

	let index = ref(0)
	let day_arr = ref(['1天', '3天', '5天', '6天', '7天', '9天以上'])
	let day_text = ref("")
	let calendar = ref()
	let date_text = ref("")

	const openCalendar = () => {
		calendar.value.open()
	}

	let mdd_list = ref([{
			name: "乌鲁木齐",
			status: 1
		},
		{
			name: "伊犁",
			status: 1
		},
		{
			name: "喀纳斯",
			status: 0
		},
		{
			name: "阿勒泰",
			status: 0
		},
	])
	let menu = ref([{
			name: "跟团游",
			desc: "省心省钱",
			children: [{
				name: "品质跟团游",
				desc: "",
			}, {
				name: "特价线路",
				desc: "省心省钱",
			}]
		},
		{
			name: "私家团",
			desc: "独立成团",
			children: [{
				name: "奢华私家团",
				desc: "",
			}, {
				name: "当季推荐",
				desc: "最美线路",
			}]
		},
		{
			name: "自由行",
			desc: "行程任选",
			children: [{
				name: "拼车游",
				desc: "省心畅游",
			}, {
				name: "旅游包车",
				desc: "您想怎么玩",
			}]
		},
	])

	const getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'end') {
			month = month + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
	const startDate = computed(() => getDate('start'))
	const endDate = computed(() => getDate('end'))

	const onTab = (i) => {
		current_child.value = i
	}

	const onMdd = (item, index) => {
		mdd.value = item.name;
		current_mdd.value = index;
	}

	const change = (index) => {
		current.value = index;
		current_child.value = 0;
	}

	const onPicker = (e) => {
		let value = day_arr.value[e.detail.value];
		day_text.value = `玩${value}`
	}

	const confirm = (e) => {
		console.log(e)
		date_text.value = `${e.month}月${e.date}日出发`
	}
	
	const to = () => {
		uni.navigateTo({
			url: "/pages/trip/list/list"
		})
	}
</script>

<style lang="scss" scoped>
	.tab-form {
		margin: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		--bg: #f1f6ff;
		overflow: hidden;

		&_tips {
			color: #999;
			font-size: 24rpx;
			margin: 20rpx 30rpx;
			text-align: center;
		}

		&_button {
			margin: 0 30rpx;
			background: var(--color);
			color: #fff;
		}

		&_bottom {
			padding: 40rpx 30rpx;
			border-top: 1rpx solid #eee;
			display: flex;
			justify-content: space-between;

			&_item {
				width: 50%;
				position: relative;

				&_icon {
					position: absolute;
					top: 4rpx;
					right: 20rpx;
				}

				&_text {
					font-size: 36rpx;
					font-weight: bold;
					display: inline-block;
				}

				&_desc {
					font-size: 24rpx;
					color: #999;
					margin-left: 5rpx;
					display: inline-block;
				}
			}
		}

		.gray {
			color: #ccc;
		}

		&_body {
			padding: 30rpx;

			&_tag {
				display: flex;
				padding: 20rpx 0;

				.tag_active {
					color: var(--color);
					font-weight: bold;
				}

				&_item {
					background: var(--bg);
					font-size: 24rpx;
					padding: 4rpx 15rpx;
					margin-right: 20rpx;
					color: #333;
					border-radius: 5rpx;
					white-space: nowrap;
				}
			}

			&_mdd {
				display: flex;
				align-items: center;
				font-size: 36rpx;
				font-weight: bold;

				&_text {
					margin-right: 20rpx;
				}
			}
		}

		.active {
			background: #fff;
			width: 60%;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;
			box-shadow: 30rpx 18rpx 0 0 #fff, -30rpx 18rpx 0 0 #fff;


			&::after {
				content: '';
				position: absolute;
				right: -30rpx;
				bottom: 0;
				width: 15px;
				height: 60px;
				background: var(--bg);
				border-radius: 0 0 0 20rpx;
			}

			&::before {
				content: '';
				position: absolute;
				left: -30rpx;
				bottom: 0;
				width: 15px;
				height: 60px;
				background: var(--bg);
				border-radius: 0 0 20rpx 0;
			}
		}

		&_top {
			display: flex;
			justify-content: space-between;
			background: var(--bg);
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;


			&_item {
				width: 20%;
				text-align: center;
				padding: 15rpx 0;

				&_tab {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.tab-this {
						color: var(--color);
						position: relative;

						&::after {
							content: "";
							background: var(--color);
							display: block;
							width: 40%;
							height: 6rpx;
							position: absolute;
							bottom: -15rpx;
							left: 30%;
							border-radius: 20rpx;
						}
					}

					&_item {
						width: 50%;
						text-align: center;
						border-right: 1px solid #eee;

						&:last-child {
							border-right: none;
						}

						&_name {
							font-size: 32rpx;
							font-weight: bold;
						}

						&_desc {
							font-size: 20rpx;
						}
					}
				}

				&_box {
					&_name {
						font-size: 28rpx;
					}

					&_desc {
						font-size: 20rpx;
						color: #999;
					}
				}

			}
		}
	}
</style>